<template>
<section class="zone-rank">
  <header class="rank-head">
    <h3>排行</h3>
    <div class="bili-tab rank-tab">
      <div class="bili-tab-item on">全部</div>
      <div class="bili-tab-item">原创</div>
    </div>
    <div class="bili-dropdown rank-dropdown">
      <span class="selected">
        三日
      </span>
      <i class="icon icon-arrow-down"></i>
      <ul class="dropdown-list">
        <li class="dropdown-item" style="display:none">三日</li>
        <li class="dropdown-item">一周</li>
      </ul>
    </div>
  </header>
  <section class="rank-list-wrap">
    <ul class="rank-list hot-list">
      <li class="rank-item" :class="{show:true}">
        <i class="ri-num">1</i>
        <a class="ri-info-wrap clearfix" title="bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV">
          <div class="lazy-img ri-preview">
            <img src="//i2.hdslb.com/bfs/archive/b5ab00d1c20ca6a94f8b2f04648402bbf4cc5186.jpg@160w_100h.webp"/>
          </div>
          <div class="ri-detail">
            <p class="ri-title">bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV</p>
            <p class="ri-point">综合评分：13.5万</p>
          </div>
          <div class="watch-later-trigger w-later"></div>
        </a>
      </li>
      <li class="rank-item">
        <i class="ri-num">1</i>
        <a class="ri-info-wrap clearfix" title="bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV">
          <div class="ri-detail">
            <p class="ri-title">bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV</p>
            <p class="ri-point">综合评分：13.5万</p>
          </div>
        </a>
      </li>
      <li class="rank-item">
        <i class="ri-num">1</i>
        <a class="ri-info-wrap clearfix" title="bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV">
          <div class="ri-detail">
            <p class="ri-title">bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV</p>
            <p class="ri-point">综合评分：13.5万</p>
          </div>
        </a>
      </li>
      <li class="rank-item">
        <i class="ri-num">1</i>
        <a class="ri-info-wrap clearfix" title="bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV">
          <div class="ri-detail">
            <p class="ri-title">bilibili Moe 2017 动画角色人气大赏日本动画场宣传PV</p>
            <p class="ri-point">综合评分：13.5万</p>
          </div>
        </a>
      </li>
    </ul>
  </section>
  <a target="_blank" class="more-link">
    查看更多
    <i class="icon icon-arrow-r"></i>
  </a>
</section>
</template>

<script>
export default {
  name: 'browrank',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>
<style lang="stylus" scoped>
.zone-rank
  float right
  width 260px
  min-height 360px
.rank-head
  height 24px
  line-height 24px
  h3
    float left
    font-size 18px
    font-weight 400
.bili-tab
  margin-left 20px
  float left
  overflow hidden
  zoom 1
  .bili-tab-item
    float left
    position relative
    height 20px
    line-height 20px
    cursor pointer
    padding 1px 0 2px
    border-bottom 1px solid transparent
    margin-left 12px
    transition .2s
    transition-property border,color
    &:first-child
      margin-left 0
    &:before
      content ""
      position absolute
      left 50%
      margin-left -3px
      bottom 0
      width 0
      height 0
      border 3px dashed #00a1d6
      border-bottom-style solid
      border-top 0
      border-left-color transparent
      border-right-color transparent
      display none
    &.on
      background-color transparent
      border-color #00a1d6
      color #00a1d6
      &:before
        display block

.bili-dropdown
  position relative
  display inline-block
  vertical-align middle
  background-color #fff
  cursor default
  padding 0 7px
  height 22px
  line-height 22px
  border 1px solid #ccd0d7
  border-radius 4px
  float right
  &:hover
    .dropdown-list
      display block
  .selected
    display inline-block
    vertical-align top
  .icon-arrow-down
    background-position -475px -157px
    display inline-block
    vertical-align middle
    width 12px
    height 6px
    margin-left 5px
    margin-top -1px
  .dropdown-list
    position absolute
    width 100%
    background #fff
    border 1px solid #ccd0d7
    border-top 0
    left -1px
    top 22px
    z-index 10
    display none
    border-radius 0 0 4px 4px
    .dropdown-item
      padding 3px 7px
      margin 0
      cursor pointer
      &:hover
        background-color #eee
.rank-list-wrap
  width 200%
  overflow hidden
  zoom 1
  transition all .2s linear
  .rank-list
    width 50%
    float left
    padding-bottom 15px
    min-height 278px
    padding-top 20px
    position relative
    .rank-item
      position relative
      padding-left 25px
      margin-top 20px
      overflow hidden
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3)
        .ri-num
          background-color #f25d8e
      &:first-child
        margin-top 0
      &.show
        .ri-detail
          .ri-title
            height 36px
            line-height 18px
            margin-top -3px
            width 150px
            padding 0
          .ri-point
            display block
      .ri-num
        position absolute
        color #fff
        height 18px
        line-height 18px
        top 0
        left 0
        font-size 12px
        min-width 12px
        text-align center
        background-color #b8c0cc
        border-radius 4px
        padding 0 3px
        font-weight bolder
        font-style normal
      .ri-info-wrap
        position relative
        display block
        cursor pointer
      .ri-detail
        float left
        p
          font-weight 500
        .ri-title
          line-height 18px
          height 18px
          overflow hidden
          color #222
        .ri-point
          line-height 12px
          color #99a2aa
          height 12px
          margin-top 5px
          display none
          overflow hidden
      &:hover
        .watch-later-trigger
          display block
        .ri-detail
          .ri-title
            color #00a1d6

  .w-later
    right 160px
  .ri-preview
    margin-right 5px
    width 80px
    height 50px
    float left
    // display: none;
    border-radius 4px
    overflow hidden

.watch-later-trigger
  display none
  width 22px
  height 22px
  position absolute
  right 6px
  bottom 4px
  cursor pointer
  background url(../../assets/images/watchlater.png)
.more-link
  display block
  height 24px
  line-height 24px
  background-color #e5e9ef
  text-align center
  border 1px solid #e0e6ed
  color #222
  border-radius 4px
  transition .2s
  &:hover
    background-color #ccd0d7
  .icon-arrow-r
    display inline-block
    width 6px
    height 12px
    vertical-align middle
    margin -2px 0 0 5px
    background-position -478px -218px
</style>
